@mixin calendarPanelHeader()
  height: 34px
  line-height: 34px
  text-align: center
  user-select: none
  border-bottom: 1px solid $border-default
  border-top-left-radius: 0.25rem
  border-top-right-radius: 0.25rem
  background: $bg-body

  a
    font-size: $font-md
    cursor: pointer

    &:hover
      color: $brand-primary

  &-century-select,
  &-decade-select,
  &-year-select,
  &-month-select
    padding: 0 2px
    font-weight: bold
    display: inline-block
    color: $text-default
    line-height: 34px

  &-century-select-arrow,
  &-decade-select-arrow,
  &-year-select-arrow,
  &-month-select-arrow
    display: none

  &-prev-century-btn,
  &-next-century-btn,
  &-prev-decade-btn,
  &-next-decade-btn,
  &-prev-month-btn,
  &-next-month-btn,
  &-prev-year-btn,
  &-next-year-btn
    position: absolute
    top: 0
    color: $text-default
    font-family: Arial, "Hiragino Sans GB", "Microsoft Yahei", "Microsoft Sans Serif", sans-serif
    padding: 0 5px
    font-size: 16px
    display: inline-block
    line-height: 34px

  &-prev-century-btn,
  &-prev-decade-btn,
  &-prev-year-btn
    left: 7px

    &:after
      font-size: 1rem
      content: '«'

  &-next-century-btn,
  &-next-decade-btn,
  &-next-year-btn
    right: 7px

    &:after
      font-size: 1rem
      content: '»'

  &-prev-month-btn
    left: 29px

    &:after
      font-size: 1rem
      content: '‹'

  &-next-month-btn
    right: 29px

    &:after
      font-size: 1rem
      content: '›'
